import Vue from 'vue'
import VueRouter from 'vue-router'

// 导入路由模块 拿到路由的实例对象并挂载
import Login from '@/views/Login.vue' // 登录组件
import Home from '@/views/Home.vue' // 后台主页
import Welcome from '@/views/Welcome.vue' // 后台主页中的 主体区域
import Users from '@/views/user/Users.vue' // 后台主页中的 用户列表
import Rights from '@/views/power/Rights.vue' // 后台主页中的 权限列表
import Roles from '@/views/power/Roles.vue' // 后台主页中的 角色列表
import Cate from '@/views/goods/Cate.vue' // 后台主页中的 商品分类
import Params from '@/views/goods/Params.vue' // 后台主页中的 分类参数
import List from '@/views/goods/List.vue' // 后台主页中的 商品列表
import Add from '@/views/goods/Add.vue' // 后台主页中的 商品列表的添加商品
import Order from '@/views/order/Order.vue' // 后台主页中的 订单列表
import Report from '@/views/report/Report.vue' // 后台主页的 数据报表

Vue.use(VueRouter)

// 通过常量 routes 声明路由的匹配规则
const routes = [
  { path: '/', redirect: '/login' }, // 使用 redirect 属性，用来重定向
  { path: '/login', component: Login },
  {
    path: '/home',
    component: Home,
    redirect: '/welcome', // 重定向到 后台主页 中的主体区域
    children: [ // 在父级路由规则中，使用 children 属性声明子路由规则
      { path: '/welcome', component: Welcome },
      { path: '/users', component: Users },
      { path: '/rights', component: Rights },
      { path: '/roles', component: Roles },
      { path: '/categories', component: Cate },
      { path: '/params', component: Params },
      { path: '/goods', component: List },
      { path: '/goods/add', component: Add },
      { path: '/orders', component: Order },
      { path: '/reports', component: Report }
    ]
  }
]

// 创建路由的实例对象
const router = new VueRouter({
  routes // 属性名与属性值相等 可简写
})

// 挂载导航守卫 控制路由的访问权限。只要发生了路由的导航跳转，就会触发指定的回调函数
router.beforeEach((to, from, next) => { // 调用 router 路由实例对象的 beforeEach()方法声明
  if (to.path === '/login') return next() // 如果 要访问的地址是登录页面 直接放行
  const tokenStr = window.sessionStorage.getItem('token') // 在本地储存中获取 键为token的数据 并赋值给常量 tokenStr
  if (!tokenStr) return next('/login') // 如果 没有token，强制跳转到 登录页面
  next() // 如果 有token 直接放行
})

export default router
